<template>
 <div class="flex flex-col items-center justify-center h-full">
    <StudyTip />
    <div class="flex flex-col gap-4 w-full max-w-md px-4 mt-[1rem]">
        <div class="text-xs text-gray-500 py-2">从下列4个选项中选择正确的释义</div>
        <div v-for="item in courseStore.currentData?.randomContents"
         @click=clickAnaswer(item) 
         :class="[
          'btn  shadow-xl   btn-lg text-sm justify-start px-4 transition-all duration-300 hover:scale-105'
          ,getClassNames(item)
         ]">
         {{item.chinese}}
        </div>
    </div>
 </div>

 <div class="flex gap-[3rem] items-center justify-center h-[5rem]">
    <StudyPlayKdd />
    <template v-if="userAnswerStatus === 'err'">
    <div
      class="tooltip"
      data-tip="下一个 快捷键 空格"
      @click="clickSubmitAnswer()"
    >
      <button class="btn btn-sm btn-dash btn-primary">
        <template v-if="!isMobile()">
          <kbd class="kbd kbd-xs">空格</kbd>
        </template>
        下一个
      </button>
    </div>
</template>
  </div>
</template>
<script setup>
import { useCourseStore } from "~/stores/course";
import { useStudyInput } from "~/composables/study/useStudy";
import { isMobile } from "~/composables/common/mobile";
import {
  useTip,
} from "~/composables/study/studentStatus";
const {  autoTip } = useTip();
const { goNext, AnswerErr, AnswerRight } = useStudyInput();
const courseStore = useCourseStore();
const userAnswerStatus = ref('typing');
const userAnswerId = ref('');
import {
  registerShortcut,
  cancelShortcut,
} from "~/composables/user/globalShortcut";
const clickSubmitAnswer = () => {
    if (userAnswerStatus.value === 'typing') return;
    goNext();
    userAnswerStatus.value = 'typing';
    userAnswerId.value = '';
}
const clickAnaswer = (item) => {
    if (userAnswerStatus.value !== 'typing') return;
    userAnswerId.value = item.id;
    if (item.chinese === courseStore.currentData?.chinese) {
        userAnswerStatus.value = 'right';
        AnswerRight();
        setTimeout(() => {
            goNext();
            userAnswerStatus.value = 'typing';
        }, 1500);
    } else {
        userAnswerStatus.value = 'err';
        autoTip();
        AnswerErr();
    }
}
const getClassNames = (word) => {
    if(userAnswerId.value !== word.id){
        return 'btn-outline';
    }
    if (userAnswerStatus.value === 'typing') {
        return 'btn-outline';
    } else if (userAnswerStatus.value === 'right') {
        return 'btn-success';
    } else if (userAnswerStatus.value === 'err') {
        return 'btn-error';
    }
}
const registeredShortcuts = [];
onMounted(async () => {
  registeredShortcuts.push(
    registerShortcut(
      "enter",
      (e) => {
        if (userAnswerStatus.value !== 'err') return;
        userAnswerStatus.value = 'typing';
        goNext();
      },
      { priority: "high" }
    )
  );
  registeredShortcuts.push(
    registerShortcut(
      "ctrl+1",
      (e) => {
   
      },
      { priority: "high" }
    )
  );
});
onUnmounted(() => {
  registeredShortcuts.forEach((shortcut) => {
    cancelShortcut(shortcut);
  });
});
</script>

